<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Form Test</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/css/bootstrap.min.css" />
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/black-tie/jquery-ui.css" />
    <link rel="stylesheet" href="../form-validator/theme-default.css" />
    <style>

        /* Form and inputs */
        form {
            width: 500px;
            margin: 0 auto;
            padding: 20px;
            display: block;
        }

        input.form-control {
            width: 375px;
        }

        button, input[type="submit"], .button {
            margin-bottom: 8px;
        }


        /* modify inputs for password strength */
        .password-strength input.form-control {
            width: 375px;
            margin-right: 4px;
            display: inline;
        }

        .password-strength label {
            display: block;
        }

        /* Checkboxes */
        .form-group.check-boxes input {
            margin-left: 10px;
        }

        /* Error container for form C */

        #error-container div {
            color: red;
            line-height: 140%;
        }

        #error-container div:last-child {
            padding-bottom: 10px;
        }

    </style>
</head>
<body>
<div>
    <form action="" id="form-a" role="form">
        <div class="form-group">
            <label class="control-label" for="inline-suggestions">Inline suggestions</label>
            <input name="inline suggestions" type="text" id="inline-suggestions" class="form-control" data-suggestions="Monkey, Horse, Hound, Fox, Tiger, Elephant" />
        </div>

        <div class="form-group">
            <label class="control-label" for="country-suggestions">Country suggestions</label>
            <input name="country suggestions" data-validation="country" type="text" id="country-suggestions" class="form-control" />
        </div>

        <div class="form-group">
            <label class="control-label" for="country-suggestions">Swedish county suggestions</label>
            <div>
                <div>
                    <!-- Make sure error class "has-error" gets all the way up to .form-group -->
                    <input name="Swedish county suggestion" data-validation="swecounty" type="text" id="swedish-county-suggestions" class="form-control" />
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label">Year</label>
            <input name="birth" class="form-control"
                   data-validation="length date"
                   data-validation-length="min5"
                   data-validation-format="yyyy/mm/dd"
                   data-suggestions="2014/01/15,2014/01/16,2014/01/17" />
        </div>

        <div class="form-group">
            <label class="control-label">Datepicker</label>
            <input name="birth2" class="form-control"
                   data-validation="date"
                   data-validation-format="mm/dd/yyyy"
                   id="datepicker" />
        </div>

        <div class="form-group">
            <label class="control-label">Number 0-10 (accepting floats with comma, ignoring $ and €)</label>
            <input name="floats" class="form-control"
                   data-validation="number"
                   data-validation-ignore="$€"
                   data-validation-allowing="range[0;10], float"
                   data-validation-decimal-separator=","
            />
        </div>

        <div class="form-group password-strength">
            <label class="control-label" for="password">Display password strength (only strong)</label>
            <input name="password" type="password" id="password" class="form-control" data-validation="strength" data-validation-strength="3" />
        </div>

        <div class="form-group">
            <label class="control-label">Alphanumeric and -_ and spaces</label>
            <input name="alphanumeric with spaces" class="form-control" name="test" data-validation="alphanumeric" data-validation-allowing="-_ " />
        </div>

        <div class="form-group">
            <label class="control-label">Alphanumeric only</label>
            <input name="aplhanumeric only" class="form-control" name="test2" data-validation="alphanumeric" />
        </div>

        <div class="checkbox form-group">
            <label>
                <input name="checkbox" type="checkbox" data-validation="required" /> Must be checked
            </label>
        </div>

        <div class="form-group">
            <label class="control-label">Must choose one</label>
            <br />
            <input name="radio" type="radio" data-validation="required" value="1" /> A
            <input name="radio" type="radio" value="1" /> B
            <input name="radio" type="radio" value="1" /> C
            <input name="radio" type="radio" value="1" /> D
        </div>

        <div class="form-group">
            <label class="control-label">Even numbers only</label>
            <input name="even numbers" class="form-control" name="test4" data-validation="even_number" />
        </div>

        <div class="form-group">
            <label class="control-label">Make a choice</label>
            <br />
            <select name="choice" data-validation="required" data-validation-error-msg="Please make a choice">
                <option value="">- - Choose - -</option>
                <option>A</option>
                <option>B</option>
                <option>C</option>
                <option>D</option>
            </select>
        </div>

        <div class="form-group">
            <label class="control-label">Text</label>
            (<span id="max-len">20</span> chars left)<br />
            <textarea id="text-area" class="form-control" name="some-text"></textarea>
        </div>
        <div class="form-group">
            <label class="control-label">Server validation</label>
            <input class="form-control" name="code" value="secret"
                   data-validation-help="The word is &quot;secret&quot;"
                   data-validation="length server"
                   data-validation-length="min2"
                   data-validation-url="http://www.formvalidator.net/validate-email.php" />
        </div>
        <div class="form-group">
            <label class="control-label">File validation</label>
            <input type="file" name="some-file1" class="form-control"
                   data-validation="size mime required dimension"
                   data-validation-help="Images only"
                   data-validation-allowing="jpg, png, ico"
                   data-validation-dimension="100-800"
                   data-validation-ratio="8:10-12:10"
                   data-validation-max-size="400kb"
                   data-validation-error-msg-size="The file cant be larger than 400kb"
                   data-validation-error-msg-ratio="The image dimensions has to be from 8:10-12:10"
                   data-validation-error-msg="You must upload an image file (jpg,png or ico, max 400 kb)"
            />
        </div>
        <div class="form-group">
            <label class="control-label">File name</label>
            <input type="text" name="some-file2" class="form-control"
                   data-validation="extension required"
                   data-validation-error-msg="You must write a file name with extension jpg|png|ico"
                   data-validation-allowing="jpg, png, ico"
            />
        </div>
        <div class="form-group">
            <label class="control-label">
                Callback validation, set this value to &quot;1&quot; and
                validation will fail
            </label>
            <input id="callback" class="form-control" />
        </div>

        <div class="form-group check-boxes">
            <label>Checkbox group</label><br />
            <label>
                <input type="checkbox" name="box" value="1"
                       data-validation="checkbox_group"
                       data-validation-qty="1-2" /> 1
            </label>
            <label>
                <input type="checkbox" name="box" value="2" /> 2
            </label>
            <label>
                <input type="checkbox" name="box" value="3" /> 3
            </label>
            <label>
                <input type="checkbox" name="box" value="4" /> 4
            </label>
            <label>
                <input type="checkbox" name="box" value="5" /> 5
            </label>
        </div>

        <p style="line-height: 200%">
            <input type="submit" class="button">
            <br />
            <button class="button" type="button"
                    onclick="alert('Form a is ' + ( $('#form-a').isValid({}, {}, false) ? 'VALID':'NOT VALID'));">
                Test validation via js (<strong>without error messages</strong>)
            </button>
            <br />
            <button class="button" type="button"
                    onclick="alert('Form a is ' + ( $('#form-a').isValid() ? 'VALID':'NOT VALID'));">
                Test validation via js (showing error messages)
            </button>
            <br />
            <input type="reset" class="button">
        </p>
    </form>
    <hr />
    <form id="form-b">
        <h4>Validate on submit</h4>
        <div class="form-group">
            <label class="control-label">Test</label>
            <input name="test" data-validation="number" type="text" />
        </div>
        <div class="form-group">
            <label class="control-label">Password</label>
            <input name="pass" type="password" />
        </div>
        <div class="form-group">
            <label class="control-label">Password again</label>
            <input data-validation-confirm="pass" type="password"
                   data-validation="confirmation" />
        </div>
        <p>
            <input type="submit" class="button">
            <input type="reset" class="button">
        </p>
    </form>
    <hr />
    <form id="form-c">
        <div class="form-group">
            <label class="control-label">Country</label>
            <input name="test" data-validation="country" data-validation-error-msg="No valid country given" />
        </div>
        <div class="form-group">
            <label class="control-label">E-mail</label>
            <input name="testmail" data-validation="email" data-validation-error-msg="E-mail is not valid" />
        </div>
        <div class="form-group">
            <label class="control-label">Confirm e-mail</label>
            <input name="test" data-validation="confirmation" data-validation-confirm="testmail" />
        </div>
        <div class="form-group">
            <!-- The numeral library appears to not parse correctly when periods are the thousands delimiter
			and commas are the decimal delimiter. -->
            <label class="control-label">Number auto formatted '0,0.0000'</label>
            <input name="numeral" data-sanitize="numberFormat" data-sanitize-number-format="0,0.0000" />
        </div>
        <div class="form-group">
            <label class="control-label">Number format '0,0.0'</label>
            <input type="text" name="amount" data-validation="number" data-validation-allowing="float"
                   data-sanitize="numberFormat"  data-sanitize-number-format="0,0.0">
        </div>
        <div class="form-group">
            <label class="control-label">Alphanumeric (will only be validated if checkbox below is checked)</label>
            <input name="test2"
                   data-validation="alphanumeric"
                   data-validation-error-msg="Invalid above..."
                   data-validation-if-checked="checker" />
            <br />
            Checkbox <input type="checkbox" name="checker" value="99" />
        </div>
        <div class="form-group">
            <label class="control-label">Alphanumeric (will only be validated if checkbox above is checked)</label>
            <input name="test2"
                   data-validation="alphanumeric"
                   data-validation-error-msg="Invalid below..."
                   data-validation-if-checked="checker"
                   data-validation-if-checked-value="99" />
        </div>
        <div id="error-container"></div>
        <p>
            <input type="submit" class="button">
            <input type="reset" class="button">
        </p>
    </form>
    <hr />
    <form id="form-d">
        <h2>HTML5 attributes</h2>
        <div class="form-group">
            <label class="control-label">type="email"</label>
            <input type="email" required="required" list="da-mejl" />
            <datalist id="da-mejl">
                <option value="Test">Test</option>
                <option value="test2">test2</option>
                <option value="test3">test3</option>
            </datalist>
        </div>
        <div class="form-group">
            <label class="control-label">type="url" (optional)</label>
            <input type="url" data-validation="length" data-validation-length="20-50" />
        </div>
        <div class="form-group">
            <label class="control-label">type="number"</label>
            <input type="number" required="required" />
        </div>
        <div class="form-group">
            <label class="control-label">type="number"</label>
            <input type="number" required="required" maxlength="30" />
        </div>
        <div class="form-group">
            <label class="control-label">type="number" (optional)</label>
            <input type="number" data-validation-optional="true"/>
        </div>
        <div class="form-group">
            <label class="control-label">type="number" range[-5;5]</label>
            <input type="number" min="-5" max="5" required="required" />
        </div>
        <div class="form-group">
            <label class="control-label">pattern="^([a-z]+)$"</label>
            <input type="text" name="some-colorz" list="some-colorz" pattern="^([a-z]+)$" required="required" />
            <datalist id="some-colorz" style="display: none">
                <option value="Green">Green</option>
                <option value="Blue">Blue</option>
                <option value="Red">Red</option>
                <option value="Black">Black</option>
                <option value="White">White</option>
            </datalist>
        </div>
        <p>
            <input type="submit" class="button">
            <input type="reset" class="button">
        </p>
    </form>
    <hr />
    <form id="form-e">
        <h2>Validation Module: Brazil</h2>
        <div class="form-group">
            <label class="control-label">Telephone</label>
            <input name="brazil_telephone" data-validation="brphone" type="text" />
        </div>
        <div class="form-group">
            <label class="control-label">CEP</label>
            <input name="brazil_cep" data-validation="cep" type="text" />
        </div>
        <div class="form-group">
            <label class="control-label">CPF</label>
            <input name="brazil_cpf" data-validation="cpf" type="text" />
        </div>
        <p>
            <input type="submit" class="button">
            <input type="reset" class="button">
        </p>
    </form>
    <hr />
    <form id="form-f">
        <h2>Validation Module: Poland</h2>
        <div class="form-group">
            <label class="control-label">Pesel</label>
            <input name="poland_plpesel" data-validation="plpesel" type="text" />
        </div>
        <div class="form-group">
            <label class="control-label">NIP</label>
            <input name="poland_plnip" data-validation="plnip" type="text" />
        </div>
        <div class="form-group">
            <label class="control-label">REGON</label>
            <input name="poland_plregon" data-validation="plregon" type="text" />
        </div>
        <p>
            <input type="submit" class="button">
            <input type="reset" class="button">
        </p>
    </form>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script>
<script src="../form-validator/jquery.form-validator.js"></script>
<script>
    (function($, window) {
        // setup datepicker
        $("#datepicker").datepicker();

        // Add a new validator
        $.formUtils.addValidator({
            name : 'even_number',
            validatorFunction : function(value, $el, config, language, $form) {
                return parseInt(value, 10) % 2 === 0;
            },
            borderColorOnError : '',
            errorMessage : 'You have to give an even number',
            errorMessageKey: 'badEvenNumber',
        });

        window.applyValidation = function(validateOnBlur, forms, messagePosition, xtraModule) {
            if( !forms )
                forms = 'form';
            if( !messagePosition )
                messagePosition = 'top';

            $.validate({
                form : forms,
                language : {
                    requiredFields: 'Du måste bocka för denna'
                },
                validateOnBlur : validateOnBlur,
                errorMessagePosition : messagePosition,
                scrollToTopOnError : true,
                lang : 'sv',
                sanitizeAll : 'trim', // only used on form C
                // borderColorOnError : 'purple',
                modules : 'security, location, sweden, file,' +
                ' uk, brazil poland' +( xtraModule ? ','+xtraModule:''),
                onModulesLoaded: function() {
                    $('#country-suggestions').suggestCountry();
                    $('#swedish-county-suggestions').suggestSwedishCounty();
                    $('#password').displayPasswordStrength();
                },
                onValidate : function($f) {

                    console.log('about to validate form '+$f.attr('id'));

                    var $callbackInput = $('#callback');
                    if( $callbackInput.val() == 1 ) {
                        return {
                            element : $callbackInput,
                            message : 'This validation was made in a callback'
                        };
                    }
                },
                onError : function($form) {
                    alert('Invalid '+$form.attr('id'));
                },
                onSuccess : function($form) {
                    alert('Valid '+$form.attr('id'));
                    return false;
                }
            });
        };

        $('#text-area').restrictLength($('#max-len'));

        window.applyValidation(true, '#form-a', 'top');
        window.applyValidation(false, '#form-b', 'element');
        window.applyValidation(true, '#form-c', $('#error-container'), 'sanitize');
        window.applyValidation(true, '#form-d', 'element', 'html5');
        window.applyValidation(true, '#form-e');
        window.applyValidation(true, '#form-f');

        // Load one module outside $.validate() even though you do not have to
        $.formUtils.loadModules('date', false, false);

        $('input')
                .on('beforeValidation', function() {
                    console.log('About to validate input "'+this.name+'"');
                })
                .on('validation', function(evt, isValid) {
                    var validationResult = '';
                    if( isValid === null ) {
                        validationResult = 'not validated';
                    } else if( isValid ) {
                        validationResult = 'VALID';
                    } else {
                        validationResult = 'INVALID';
                    }
                    console.log('Input '+this.name+' is '+validationResult);
                });

    })(jQuery, window);
</script>
</body>
</html>
